Summary

This PR implements a fallback for user avatars by displaying user initials whenever the profile image is unavailable, missing, empty, null, or fails to load.

The implementation is integrated into the shared Avatar component, ensuring consistent behavior across the application while preserving the existing UI and functionality.

Closes #140

Changes Made

• Added avatar initials fallback for unavailable profile images.
• Added a shared utility for generating user initials.
• Updated the shared Avatar component to handle image load failures.
• Updated Topbar to use the shared avatar fallback.
• Updated Sidebar to use the shared avatar fallback.
• Preserved existing avatar size, border radius, spacing, and layout.
• Improved accessibility by providing a safe fallback label when the image alt text is unavailable.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation

Testing

Manually Verified

• ✅ Valid profile image displays normally.
• ✅ Missing profile image displays user initials.
• ✅ Empty avatar URL displays user initials.
• ✅ Invalid avatar URL displays user initials.
• ✅ Image load failure triggers initials fallback.
• ✅ Single-word names generate one initial.
• ✅ Multi-word names generate up to two uppercase initials.
• ✅ Empty or missing names display ?.
• ✅ Avatar size, styling, and layout remain unchanged.

Verified Locations

• Dashboard Top Navigation
• Sidebar
• User Profile Page

Build Verification

• ✅ npm run build completed successfully.
• ✅ Avatar-related files passed formatting and lint checks.

Screenshots

After (Profile Image Unavailable → Initials Fallback)

Before (Valid Profile Image)

Checklist

• Code follows the project's coding style.
• Existing functionality preserved.
• No unnecessary dependencies added.
• Manual testing completed.
• Build completed successfully.
• Temporary testing changes reverted before submission.